<template>
  <div 
    class="chat-bubble"
    :class="{
      'user-bubble': message.type === 'user',
      'system-bubble': message.type === 'system'
    }"
  >
    <div class="bubble-header">
      <span class="bubble-name">
        {{ message.type === 'user' ? '我' : '智能导诊助手' }}
      </span>
      <span class="bubble-time">{{ formatTime(message.time) }}</span>
    </div>
    <div class="bubble-content">
      <!-- 语音输入的消息显示"语音转文字"标签 -->
      <span class="voice-tag" v-if="message.isVoice">
        🎤 语音转文字
      </span>
      {{ message.content }}
      
      <!-- 系统回复中的科室推荐（图文混排） -->
      <div class="dept-recommend" v-if="message.type === 'system' && message.recommendData && message.recommendData.departments">
        <div class="recommend-title">为您推荐科室：</div>
        <div class="dept-card" v-for="dept in message.recommendData.departments" :key="dept.id">
          <div class="dept-icon">
            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect x="2" y="4" width="20" height="16" rx="2" stroke="#1989fa" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M6 8h12M6 12h12M6 16h6" stroke="#1989fa" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <div class="dept-info">
            <div class="dept-name">{{ dept.name }}</div>
            <div class="dept-matching">匹配度：{{ dept.score }}%</div>
            <div class="dept-reason">推荐理由：{{ dept.reason }}</div>
            <div class="dept-queue">当前排队：{{ dept.queueTime }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  message: {
    type: Object,
    required: true
  }
})

// 格式化时间
const formatTime = (date) => {
  if (!date) return ''
  const dateObj = typeof date === 'string' ? new Date(date) : date
  const hours = dateObj.getHours().toString().padStart(2, '0')
  const minutes = dateObj.getMinutes().toString().padStart(2, '0')
  return `${hours}:${minutes}`
}
</script>

<style scoped>
.chat-bubble {
  max-width: 80%;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.system-bubble {
  align-self: flex-start;
}
.user-bubble {
  align-self: flex-end;
}
.bubble-header {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}
.system-bubble .bubble-header {
  color: #3B82F6;
}
.user-bubble .bubble-header {
  color: #666;
}
.bubble-name {
  font-weight: 500;
}
.bubble-time {
  opacity: 0.7;
}
.bubble-content {
  padding: 12px 15px;
  border-radius: 12px;
  line-height: 1.5;
  position: relative;
}
.system-bubble .bubble-content {
  background-color: #EBF4FF;
  color: #333;
  border-top-left-radius: 4px;
}
.user-bubble .bubble-content {
  background-color: #3B82F6;
  color: #fff;
  border-top-right-radius: 4px;
}
.voice-tag {
  display: inline-block;
  margin-right: 5px;
  font-size: 12px;
  opacity: 0.8;
}

/* 科室推荐卡片 */
.dept-recommend {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px dashed rgba(0,0,0,0.1);
}
.recommend-title {
  font-weight: 500;
  margin-bottom: 10px;
  color: #3B82F6;
}
.dept-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background-color: rgba(255,255,255,0.8);
  border-radius: 8px;
}
.dept-icon img {
  width: 40px;
  height: 40px;
}
.dept-info {
  flex: 1;
}
.dept-name {
  font-weight: 500;
  margin-bottom: 3px;
}
.dept-matching {
  font-size: 12px;
  color: #10B981;
  margin-bottom: 3px;
}
.dept-reason {
  font-size: 13px;
  color: #666;
}
</style>